<div class="login-background">
  <form (ngSubmit)="login()" #loginForm="ngForm" *ngIf="!reset" id="login">
    <div class="login-box">
      <div class="logo-box">
        <div class="logo"></div>
      </div>
      <div class="form-group">
        <div class="login-icon"><i class="glyphicon user-icon"></i></div>
        <input
          type="text"
          name="username"
          class="form-control login-input"
          placeholder="Login"
          [(ngModel)]="username"
        >
        <div class="pass-icon"><i class="glyphicon password-icon"></i></div>
        <input
          type="password"
          name="password"
          class="form-control"
          placeholder="Password"
          [(ngModel)]="password"
        >
      </div>
      <div class="login-error-message text-danger" *ngIf="loginError">
        {{getErrorMessage()}}
      </div>

      <div class="login-button">
        <button
          type="submit"
          class="btn btn-primary"
          [disabled]="!username || !password"
        >
          Login
        </button>
        <p>
          <a [routerLink]="['/password_reset']">Reset password</a>
        </p>
      </div>
    </div>
  </form>

  <form #resetForm="ngForm" *ngIf="reset && !resetToken" id="reset">
    <div class="login-box">
      <div class="logo-box">
        <div class="logo"></div>
      </div>

      <div class="legend">
        <p>Please submit your login to get password resetting instructions via email.</p>
      </div>

      <div class="form-group">
        <div class="login-icon"><i class="glyphicon user-icon"></i></div>
        <input
          type="text"
          name="username"
          class="form-control login-input"
          placeholder="Login"
          [(ngModel)]="username"
        >
      </div>
      <div
        class="login-error-message text-danger"
        [ngClass]="getErrorClass()"
        *ngIf="loginError"
      >
        {{getErrorMessage()}}
      </div>

      <div class="login-button">
        <button
          class="btn btn-primary"
          [disabled]="!username"
          (click)="resetPassword()"
        >
          Reset password
        </button>
        <p>
          <a [routerLink]="['/login']">Return to login</a>
        </p>
      </div>
    </div>
  </form>

  <form #newPasswordForm="ngForm" *ngIf="reset && resetToken" id="update">
    <div class="login-box">
      <div class="logo-box">
        <div class="logo"></div>
      </div>
      <div class="form-group">
        <div class="login-icon"><i class="glyphicon password-icon"></i></div>
        <input
          type="password"
          name="password"
          class="form-control"
          placeholder="Password"
          [(ngModel)]='password'
        >
        <div class="pass-icon"><i class="glyphicon password-icon"></i></div>
        <input
          type="password"
          name="password"
          class="form-control"
          placeholder="Password confirmation"
          [(ngModel)]="passwordConfirmation"
        >
      </div>
      <div
        class="login-error-message text-danger"
        [ngClass]="getErrorClass()"
        *ngIf="loginError"
      >
        {{getErrorMessage()}}
      </div>

      <div class="login-button">
        <button
          id="update_password"
          type="button"
          class="btn btn-primary"
          [disabled]="!password || password !== passwordConfirmation"
          (click)="updatePassword()"
        >
          Update Password
        </button>
        <p>
          <a [routerLink]="['/login']">Return to login</a>
        </p>
      </div>
    </div>
  </form>

  <div class="copyrights">&copy; 2016 All rights reserved.</div>
</div>